<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Title</title>
		<!-- 讲解视频链接：https://www.bilibili.com/video/BV1mS4y1j7YZ?p=21 -->
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				background-image: url(./images/bg1.jpg);
				transition: all 0.3s;
			}

			#mask {
				background-color: rgba(255, 255, 255, 0.3);
				height: 200px;
				text-align: center;
			}

			#mask img {
				height: 80px;
				width: 150px;
				margin-top: 35px;
				margin-right: 20px;
				cursor: pointer;
				border-radius: 20px;
				border: 5px double;
				box-shadow: 0 0 15px 1px;
			}
			#mask img:hover{
				transform: scale(1.2);
				transition: all 0.1s;
			}
		</style>
	</head>

	<body>
		<div id="mask">
			<img src="./images/bg1.jpg" alt="" />
			<img src="./images/bg2.jpg" alt="" />
			<img src="./images/bg3.jpg" alt="" />
			<img src="./images/bg4.jpg" alt="" />
			<img src="./images/bg5.jpg" alt="" />
		</div>

		<script>
			// 1、找到每一个img标签，注册点击事件
			// 2、点击之后，把img标签的src属性直接设置给body标签的backgroundImage即可
			const img = document.querySelectorAll('img')
			for (let i = 0;i < img.length;i++) {
			   img[i].addEventListener('click',function(){
					document.body.style.backgroundImage = `url(${img[i].src})`
			   })
			}
		</script>
	</body>
</html>
